<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客园</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #1e293b;
            color: #e0e0e0;
            display: flex;
            height: 100vh;
            overflow: hidden;
        }

        /* 左侧边栏 */
        .sidebar {
            width: 70px;
            background-color: #1e293b;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 20px;
            border-right: 1px solid #2d374;
8        }

        .sidebar-header {
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #a0aec0;
            margin-bottom: 5px;
        }

        .sidebar-item {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #a0aec0;
            position: relative;
            font-size: 14px;
        }

        .sidebar-item.active {
            color: #6366f1;
        }

        .sidebar-item:hover {
            background-color: rgba(99, 102, 241, 0.1);
        }

        .sidebar-item i {
            font-size: 18px;
        }

        .sidebar-item .badge {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #6366f1;
            color: white;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
        }

        .sidebar-item .badge.new {
            background-color: #90cdf4;
        }

        /* 主内容区 */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* 顶部搜索栏 */
        .search-bar {
            height: 50px;
            background-color: #2d3748;
            padding: 0 20px;
            display: flex;
            align-items: center;
        }

        .search-container {
            flex: 1;
            display: flex;
            align-items: center;
            background-color: #374151;
            border-radius: 4px;
            padding: 0 10px;
        }

        .search-container i {
            color: #94a3b8;
            margin-right: 10px;
        }

        .search-container input {
            background: transparent;
            border: none;
            color: #e0e0e0;
            flex: 1;
            outline: none;
            font-size: 14px;
        }

        /* 用户座右铭 */
        .user-motto {
            padding: 10px 20px;
            font-size: 14px;
            color: #94a3b8;
            background-color: #2d3748;
            border-bottom: 1px solid #374151;
            text-align: center;
        }

        /* 用户卡片 */
        .user-card {
            height: 200px;
            background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('OIP-C.jpg') no-repeat center center;
            background-size: cover;
            position: relative;
            display: flex;
            align-items: flex-end;
            padding: 20px;
        }

        .user-info {
            display: flex;
            align-items: center;
            z-index: 1;
        }

        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid #fff;
            margin-right: 15px;
        }

        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .user-details {
            display: flex;
            flex-direction: column;
        }

        .user-name {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .user-stats {
            display: flex;
            font-size: 14px;
            color: #94a3b8;
        }

        .stat {
            margin-right: 15px;
        }

        .follow-btn {
            background-color: #6366f1;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 2px 8px;
            font-size: 12px;
            cursor: pointer;
            margin-left: 5px;
        }

        /* 导航标签 */
        .nav-tabs {
            display: flex;
            background-color: #2d3748;
            border-bottom: 1px solid #374151;
        }

        .nav-tab {
            padding: 12px 20px;
            cursor: pointer;
            color: #94a3b8;
            font-size: 14px;
        }

        .nav-tab.active {
            color: #e0e0e0;
            border-bottom: 2px solid #6366f1;
        }

        /* 博客内容 */
        .blog-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }

        .blog-post {
            background-color: #2d3748;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .blog-title {
            font-size: 16px;
            margin-bottom: 10px;
            color: #e0e0e0;
        }

        .blog-summary {
            font-size: 14px;
            color: #94a3b8;
            line-height: 1.5;
            margin-bottom: 15px;
        }

        .blog-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 15px;
            border-top: 1px solid #374151;
        }

        .blog-stats {
            display: flex;
            color: #94a3b8;
            font-size: 14px;
        }

        .stat-item {
            display: flex;
            align-items: center;
            margin-right: 15px;
        }

        .stat-item i {
            margin-right: 5px;
        }

        .blog-buttons {
            display: flex;
        }

        .btn {
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            margin-left: 10px;
            border: none;
        }

        .btn-edit {
            background-color: #374151;
            color: #e0e0e0;
        }

        .btn-read {
            background-color: #6366f1;
            color: white;
        }

        /* 右侧边栏 */
        .right-sidebar {
            width: 300px;
            background-color: #1e293b;
            border-left: 1px solid #2d3748;
            display: flex;
            flex-direction: column;
        }

        /* 通知图标 */
        .notification-icons {
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            border-bottom: 1px solid #2d3748;
        }

        .notification-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #a0aec0;
            cursor: pointer;
        }

        .notification-icon i {
            font-size: 20px;
            margin-bottom: 5px;
        }

        /* 季节卡片 */
        .season-card {
            background-color: #fbbf24;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            text-align: center;
            background-image: url('https://via.placeholder.com/300x100');
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
        }

        .season-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }

        .season-date {
            font-size: 14px;
            color: #333;
        }

        /* 日历 */
        .calendar {
            padding: 15px;
            background-color: #2d3748;
            border-radius: 8px;
            margin: 15px;
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .calendar-header .month {
            font-size: 16px;
            font-weight: bold;
        }

        .calendar-nav {
            display: flex;
        }

        .calendar-nav button {
            background: none;
            border: none;
            color: #a0aec0;
            cursor: pointer;
            font-size: 16px;
        }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }

        .calendar-day {
            text-align: center;
            padding: 5px;
            font-size: 14px;
        }

        .calendar-day.header {
            color: #94a3b8;
            font-weight: bold;
        }

        .calendar-day.current {
            background-color: #6366f1;
            color: white;
            border-radius: 50%;
        }

        .calendar-day.other-month {
            color: #4b5563;
        }

        /* 常用链接 */
        .quick-links {
            padding: 15px;
            background-color: #2d3748;
            border-radius: 8px;
            margin: 15px;
        }

        .quick-links-header {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .quick-links-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .quick-link {
            display: flex;
            align-items: center;
            background-color: #374151;
            padding: 8px;
            border-radius: 4px;
            cursor: pointer;
        }

        .quick-link i {
            margin-right: 8px;
            color: #6366f1;
        }

        /* 我的标签 */
        .my-tags {
            padding: 15px;
            background-color: #2d3748;
            border-radius: 8px;
            margin: 15px;
        }

        .my-tags-header {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
        }

        /* 顶部用户头像 */
        .top-user {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #fff;
            overflow: hidden;
            cursor: pointer;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <!-- 左侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">博客园</div>
        <div class="sidebar-item active">
            <i class="fas fa-home"></i>
        </div>
        <div class="sidebar-item">
            <i class="fas fa-house-user"></i>
        </div>
        <div class="sidebar-item">
            <i class="fas fa-pen"></i>
        </div>
        <div class="sidebar-item">
            <i class="fas fa-file-alt"></i>
        </div>
        <div class="sidebar-item">
            <i class="fas fa-envelope"></i>
        </div>
        <div class="sidebar-item">
            <i class="fas fa-rss"></i>
        </div>
        <div class="sidebar-item">
            <i class="fas fa-cog"></i>
        </div>
        <div class="sidebar-header">CSDN主页</div>
        <div class="sidebar-item">
            <i class="fas fa-code"></i>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <!-- 顶部搜索栏 -->
        <div class="search-bar">
            <div class="search-container">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="search...">
            </div>
        </div>

        <!-- 用户座右铭 -->
        <div class="user-motto">
            有理想，但不妄想，有希望，但不奢望，有作为，但不妄为
        </div>

        <!-- 用户卡片 -->
        <div class="user-card">
            <div class="user-info">
                <div class="user-avatar">
                    <img src="1.jpg" alt="用户头像">
                </div>
                <div class="user-details">
                    <div class="user-name">
                        LogicYarn
                        <button class="follow-btn">+ 关注</button>
                    </div>
                    <div class="user-stats">
                        <div class="stat">园龄：10个月</div>
                        <div class="stat">粉丝：0</div>
                        <div class="stat">关注：4</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 导航标签 -->
        <div class="nav-tabs">
            <div class="nav-tab active">收藏</div>
            <div class="nav-tab">闪存</div>
            <div class="nav-tab">小组</div>
            <div class="nav-tab">博问</div>
        </div>

        <!-- 博客内容 -->
        <div class="blog-content">
            <div class="blog-post">
                <div class="blog-title">博客园博客申请教程，附自定义漂亮主页样式详细教程---2024</div>
                <div class="blog-summary">
                    摘要：最近在自定义博客园主题页面样式时，遇到一些问题。所以决定写下此文作为第一篇博客。<br>
                    一、申请开通个人博客 1.1 注册账号（步骤略） 1.2 申请写博客权限 在注册完博客园账号后，在首页右上角点击 --> 我的博客 点击后，会出现如下图所示：按照要求填写申请理由（例如记录个人技术成长、学习笔记记录等）
                </div>
                <div class="blog-actions">
                    <div class="blog-stats">
                        <div class="stat-item"><i class="fas fa-eye"></i> 6</div>
                        <div class="stat-item"><i class="fas fa-comment"></i> 0</div>
                        <div class="stat-item"><i class="fas fa-thumbs-up"></i> 0</div>
                    </div>
                    <div class="blog-buttons">
                        <button class="btn btn-edit">编辑</button>
                        <button class="btn btn-read">阅读</button>
                    </div>
                </div>
            </div>

            <div class="blog-post">
                <div class="blog-title">一名ICer的博客开帖记录</div>
                <div class="blog-summary">
                    摘要：前言 看园子内容已有3-4年之余，虽然对于一名ICer来说，园子内容偏少。但是仍然"咸鱼IC"等一众大佬的优质好文，让我知道这是我未来学习技术的一个好地方。也在我心中埋下了一个未来自己也要开始撰写博文的念想，选择园子，希望能够在记录学习笔记的同时，也为开源世界贡献自己的力量！由于本人有较重度的"健
                </div>
                <div class="blog-actions">
                    <div class="blog-stats">
                        <div class="stat-item"><i class="fas fa-eye"></i> 5</div>
                        <div class="stat-item"><i class="fas fa-comment"></i> 0</div>
                        <div class="stat-item"><i class="fas fa-thumbs-up"></i> 0</div>
                    </div>
                    <div class="blog-buttons">
                        <button class="btn btn-edit">编辑</button>
                        <button class="btn btn-read">阅读</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧边栏 -->
    <div class="right-sidebar">
        <!-- 通知图标 -->
        <div class="notification-icons">
            <div class="notification-icon">
                <i class="fas fa-envelope"></i>
            </div>
            <div class="notification-icon">
                <i class="fas fa-bell"></i>
            </div>
            <div class="notification-icon">
                <i class="fas fa-th-list"></i>
            </div>
        </div>

        <!-- 季节卡片 -->
        <div class="season-card">
            <div class="season-title">Autumn Wonderland</div>
            <div class="season-date">14 Aug, 2024</div>
        </div>

        <!-- 日历 -->
        <div class="calendar">
            <div class="calendar-header">
                <div class="calendar-nav">
                    <button><i class="fas fa-chevron-left"></i></button>
                </div>
                <div class="month">2024年8月</div>
                <div class="calendar-nav">
                    <button><i class="fas fa-chevron-right"></i></button>
                </div>
            </div>
            <div class="calendar-grid">
                <div class="calendar-day header">日</div>
                <div class="calendar-day header">一</div>
                <div class="calendar-day header">二</div>
                <div class="calendar-day header">三</div>
                <div class="calendar-day header">四</div>
                <div class="calendar-day header">五</div>
                <div class="calendar-day header">六</div>

                <div class="calendar-day other-month">28</div>
                <div class="calendar-day other-month">29</div>
                <div class="calendar-day other-month">30</div>
                <div class="calendar-day other-month">31</div>
                <div class="calendar-day">1</div>
                <div class="calendar-day">2</div>
                <div class="calendar-day">3</div>

                <div class="calendar-day">4</div>
                <div class="calendar-day">5</div>
                <div class="calendar-day">6</div>
                <div class="calendar-day">7</div>
                <div class="calendar-day">8</div>
                <div class="calendar-day">9</div>
                <div class="calendar-day">10</div>

                <div class="calendar-day">11</div>
                <div class="calendar-day">12</div>
                <div class="calendar-day">13</div>
                <div class="calendar-day current">14</div>
                <div class="calendar-day">15</div>
                <div class="calendar-day">16</div>
                <div class="calendar-day">17</div>

                <div class="calendar-day">18</div>
                <div class="calendar-day">19</div>
                <div class="calendar-day">20</div>
                <div class="calendar-day">21</div>
                <div class="calendar-day">22</div>
                <div class="calendar-day">23</div>
                <div class="calendar-day">24</div>

                <div class="calendar-day">25</div>
                <div class="calendar-day">26</div>
                <div class="calendar-day">27</div>
                <div class="calendar-day">28</div>
                <div class="calendar-day">29</div>
                <div class="calendar-day">30</div>
                <div class="calendar-day">31</div>

                <div class="calendar-day other-month">1</div>
                <div class="calendar-day other-month">2</div>
                <div class="calendar-day other-month">3</div>
                <div class="calendar-day other-month">4</div>
                <div class="calendar-day other-month">5</div>
                <div class="calendar-day other-month">6</div>
                <div class="calendar-day other-month">7</div>
            </div>
        </div>

        <!-- 常用链接 -->
        <div class="quick-links">
            <div class="quick-links-header">常用链接</div>
            <div class="quick-links-grid">
                <div class="quick-link">
                    <i class="fas fa-book"></i>
                    <span>我的随笔</span>
                </div>
                <div class="quick-link">
                    <i class="fas fa-comment"></i>
                    <span>我的评论</span>
                </div>
                <div class="quick-link">
                    <i class="fas fa-star"></i>
                    <span>我的参与</span>
                </div>
                <div class="quick-link">
                    <i class="fas fa-comments"></i>
                    <span>最新评论</span>
                </div>
                <div class="quick-link">
                    <i class="fas fa-tags"></i>
                    <span>我的标签</span>
                </div>
            </div>
        </div>

        <!-- 我的标签 -->
        <div class="my-tags">
            <div class="my-tags-header">我的标签</div>
            <div class="tag">博客园</div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 侧边栏点击效果
            const sidebarItems = document.querySelectorAll('.sidebar-item');
            sidebarItems.forEach(item => {
                item.addEventListener('click', function() {
                    sidebarItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            // 导航标签点击效果
            const navTabs = document.querySelectorAll('.nav-tab');
            navTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    navTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html>